import { useStorage } from "./hooks/useStorage";
import React, { useState, useDeferredValue, useEffect } from "react";
import "./App.css";
import { Input, List, Flex } from "antd";



const Child = (props:any) =>{
  useEffect(()=>{
    console.log("child useEffect");

    let timer = setTimeout(() => {
      fetch('http://localhost:5173/?name'+props.name)
    },500);
    return ()=>{
      console.log("child useEffect unmount");
      clearTimeout(timer)
    }
  },[props.name])
  return (
    <div>
      child
    </div>
  )
}

function App() {
  
  // 执行时机
  //  DidMount 组件渲染完成会立马执行 + DidUpdate 组件更新 
  // 依赖项发现变化才会执行，依赖项：第二个参数,[count，...]，如果依赖项是空数组则只初始化走一次（适用于初始化、详情页数据）
  // 组件卸载时执行 清理函数 组件更新之前也会执行

  const [count, setCount] = useState(0);
  const [name, setName] = useState("");
  const [isShow, setIsShow] = useState(true);

  // useEffect(()=>{
    
  //   console.log("useEffect");
  //   return ()=>{
  //     console.log("useEffect unmount");
  //   }
  // },[count, name])

  return (
    <>
      <div>
        <button onClick={()=>setIsShow(!isShow)}>显示/隐藏</button>
        <button onClick={()=>setCount(count + 1)}>{count}</button>
        <input value={name} onChange={(e)=>setName(e.target.value)} type="text" />
        {isShow && <Child name={name}></Child>}

      </div>
    </>
  );
}

export default App;
